import React from "react";
import {ContactUsItem, ContactUsProps} from "./ContactUs";
import {Stack, Title, Text, Container} from "@mantine/core";
import {IconAt, IconBrandWechat, IconMapPin, IconPhone, IconSun} from "@tabler/icons-react";

const data: ContactUsProps[] = [
  {title: "Wechat", description: "IP设计平台应用推广群", icon: IconBrandWechat},
  {title: "Email", description: "yuanchenglei@cmdi.chinamobile.com", icon: IconAt},
  {title: "Phone", description: "(+86)010-52696688-1620", icon: IconPhone},
  {title: "Address", description: "北京市海淀区丹棱街甲16号海兴大厦A座1401", icon: IconMapPin},
  {title: "Working hours", description: "8:30 a.m. – 17:00 p.m.", icon: IconSun},
];

export default function Page() {
  return (
    <Stack>
      <Stack gap={1} ta="center">
        <Title order={2} pb="xs">
          反馈与建议
        </Title>
        <Text pb="md" c="dimmed">
          多种咨询&反馈渠道，请优先选择微信群
        </Text>
      </Stack>

      <Container>
        <Stack>
          {data.map((item, index) => (
            <ContactUsItem key={index} {...item} />
          ))}
        </Stack>
      </Container>
    </Stack>
  );
}
